<template>
  <div style="background-color: rgb(245,245,245,0.6);height: 100vh">
    <div class="maintain-form">
      <el-form ref="form" :model="form" label-width="80px">
        <span class="title">报修申请表</span>
        <div id="accendantmen"></div>
        <el-divider></el-divider>
        <el-form-item label="房源ID" prop="houseID">
          <el-input v-model="form.houseID"></el-input>
        </el-form-item>
        <el-form-item label="问题描述" prop="issueDescription">
          <el-input type="textarea" v-model="form.issueDescription" style="width:450px"
                    maxlength="100" show-word-limit resize="none" :autosize="{ minRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="预约时间" style="margin-top:100px">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"
                            value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2"> - </el-col>
          <el-col :span="11">
            <el-time-select placeholder="选择时间" v-model="form.date2" style="width: 100%;"
                            :picker-options="{start: '08:00',step: '00:30',end: '20:00'}"
            ></el-time-select>
          </el-col>
        </el-form-item>
        <el-form-item label="上传图片" style="margin-top: 40px">
          <el-upload
            class="upload-img"
            :action=uploadImgUrl
            multiple
            :http-request="upLoadImage"
            :before-upload="beforeImageUpload"
            :file-list="imgList"
            :limit="6">
            <el-button size="small" type="primary" plain style="width: 100px">点击上传</el-button>
            <span slot="tip" class="el-upload__tip">&emsp;只能上传jpg/png文件，且不超过5mb</span>
          </el-upload>
        </el-form-item>
        <el-form-item style="margin-top: 100px">
          <el-button type="primary" @click="submitForm" style="margin-top:10px;margin-left: 190px">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: "maintainForm",
  data() {
    return {
      uploadImgUrl: 'http://43.138.82.70/api/rs/image/upload',
      imgList: [],
      picture:'',
      form: {
        houseID:'',
        date1: '',
        date2: '',
        issueDescription: ''
      },
      pickerOptions: {
        disabledDate(time) {
          const date = new Date();
          var flag = true;
          if(time.getTime() < date.getTime()- 3600 * 1000 * 24)
            flag = false;
          if(time.getTime() > (date.getTime()+ 3600 * 1000 * 24 * 14) )
            flag = false;
          if(flag == true)
            return false;
          else
            return true;
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }]
      },
    }

  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.date1='';
      this.form.date2='';
      this.imgList=[];
    },
    upLoadImage(file) {
      const formData = new FormData();
      formData.append('image', file.file);
      this.$axios({
        method: 'post',
        url: this.uploadImgUrl,
        data: formData,
      }).then(res => {
        console.log(res.data)
        switch (res.data.errno) {
          case 0:
            var url = res.data.url;
            if(this.picture == '')
              this.picture = url;
            else
              this.picture = this.picture+ "," + url;
            break;
          default:
            this.$message.error("操作失败！");
            break;
        }
      })
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 10;
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      } else if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return (isJPG || isPNG) && isLt5M;
    },
    submitForm() {
      const self = this;
      const formData = new FormData();
      formData.append("houseID", self.form.houseID);
      formData.append("issueDescription", self.form.issueDescription);
      formData.append("reservedTime", self.form.date1 + ' ' +self.form.date2);
      formData.append("userID", self.$store.state.ID);
      formData.append("picture", self.picture);
      console.log(self.form);
      self.$axios({
        method:'post',
        url:'/user/rights/repaircmt',
        data: formData
      }).then(res=>{
        console.log(res.data);
        console.log(res.data.data);
        if(res.data.errno == 0){
          this.$message.success('提交成功')
          setTimeout(()=>{
            location. reload()
          },1000);
        }
        else
          this.$message.error('提交失败')
      })
    },

  }
}
</script>

<style scoped>
#accendantmen{
  background:url("../assets/test.png") no-repeat 0px 0px;
  width:25%;
  height:30%;
  left: 75%;
  top: 370px;
  position: absolute;
  background-size:100% 100%;
  opacity: 0.8;
  border-radius: 5px;
  box-shadow:20px 20px 50px white inset;
}

.title{
  display: flex;
  margin-left: 300px;
  left: 10% !important;
  font-size: 20px;
  margin-bottom: 1px;
}
.maintain-form{
  border:3px solid #ffffff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 2px #909399;
  background-color:rgba(255,255,255,0.9);
  top: 29%;
  text-transform: uppercase;

  position: absolute;
  left: 58%;
  width: 720px;
  margin:180px auto;
  padding:30px 80px;/*修改背景框的大小*/
  padding-bottom: 60px;
  transform: translate(-50%,-50%) rotateY(0deg);
  backface-visibility: hidden;
  transition: all 1s;
}

body
{
  background-color: #F5F5F5;
  width:100%;
  height: 100%;
  background-size: 100% 100%;
}
.el-upload__tip{

}
</style>
